<template>
	<view class="list">
		<public-module></public-module>
		<!-- <image class="bj" src="/static/staff/kh.png"></image>
		<view class="top" :style="{marginTop:statusBarHeight+'px'}">
			<view class="top-nav">用户数据</view>
		</view>
		<view class="user">
			<view  class="user-name">林静茹</view>
			<view  class="user-sex">女 | 23岁</view>
			<view  class="user-tel">
				<u-avatar size="16" src="/static/staff/tel.png"></u-avatar>
				<view>
					183202145521
				</view>
			</view>
		</view> -->
		<view class="u-page" >
			<u-list @scrolltolower="scrolltolower"  height="calc(100vh - 180rpx)">
				<u-list-item v-for="(item, index) in indexList":key="index">
					<view class="infos" @click="from_info(item.id)">
						<view class="infos-top">
							<u-avatar size="16" src="/static/staff/md.png"></u-avatar>
							<view  class="infos-top-title">
								{{store_name}}
							</view>
						</view>
						<view class="infos-lower">
							<view  class="infos-lower-title">
								{{item.created_at}}验光数据
							</view>
							<u-avatar size="26" src="/static/staff/jt.png"></u-avatar>
						</view>
					</view>
				</u-list-item>
			</u-list>
			
		</view>
			
		<view  class="butall">
			<button @click="add()" class="but">+ 新增数据</button>
		</view>
	</view>
</template>

<script>
	import base from '@/config/baseUrl';
	import { fromList } from '@/config/api.js';
	export default {
		data() {
			return {
				indexList: [],
				
				statusBarHeight:30,
				// img:"https://cdn.uviewui.com/uview/album/1.jpg",
				id:0,
				page:1 ,//页数
				isOver:0, //是否加载完成
				isLoding:0,//是否正在加载
				store_name:'',
			};
		},
		onLoad(option) {
			this.id = option.id;
			
			// this.loadmore();
			
			// const systemInfo = uni.getSystemInfoSync();
			// const _this = this;
			// if (systemInfo.platform === 'ios') {  
			// 	_this.statusBarHeight = 30; // iOS 上状态栏的典型高度  
			// } else if (systemInfo.platform === 'android') {  
			// 	// 对于 Android，可能需要其他方法来获取状态栏高度   
			// 	_this.statusBarHeight =  (systemInfo.statusBarHeight || 24)+10; // 假设 Android 上状态栏的高度为 24px  
			// } else{
			// 	_this.statusBarHeight = (systemInfo.statusBarHeight || 24)+10; // 假设 Android 上状态栏的高度为 24px  
			// }
		},
		onShow() {
			this.indexList = [],
			this.page=1 ;//页数
			this.isOver=0; //是否加载完成
			this.isLoding=0;//是否正在加载
			this.loadmore();
		},
		methods: {
			scrolltolower() {
				this.loadmore()
			},
			loadmore() {
				
				let _this =this;
				if(_this.isOver ==1 || _this.isLoding ==1 ){return;}
				_this.isLoding = 1;
				let httpData={
					page:_this.page,
					user_id:_this.id
				};
				fromList(httpData).then((res) => {
					_this.store_name = res.store_name
					_this.indexList = _this.indexList.concat(res.data.data);
					_this.isLoding = 0;
					if(_this.page >= res.data.last_page)
					{
						//加载完成
						_this.isOver = 1;
					}else{
						 _this.page = _this.page+1;
					}
				}).catch((err) =>{
					_this.isLoding = 0;
				})
				// for (let i = 0; i < 30; i++) {
				// 	this.indexList.push({
				// 		url: this.urls[uni.$u.random(0, this.urls.length - 1)]
				// 	})
				// }
			},
			from_info(id)
			{
				uni.navigateTo({
					url: '/staff/information/information?user_id='+this.id+'&id='+id,
				});
			},
			add(){
				uni.navigateTo({
					url: '/staff/information/information?user_id='+this.id+'&id=0',
				});
			}
		},
	}
</script>

<style lang="scss">
	.list{
		.bj{
			width: 750rpx;
			position: absolute;
			z-index: -10;
			height: 100vh;
			
			
		}
		.top{
			&-nav{
				text-align: center;
				color: #333333;
		
			}
			
		}
		.user{
			margin-top: 120rpx;
			margin-left:85rpx;
			&-name{
				color: #333333;
				font-size: 48rpx;
				
			}
			&-tel{
				color: #999999;
				font-size: 28rpx;
				display: flex;
				
			}
		}
		.u-page{
			box-sizing: border-box;
			margin-top: 30rpx;
			padding: 0 32rpx;
			.infos{
				box-sizing: border-box;
				border-radius:10rpx;
				margin-bottom: 20rpx;
				width: 686rpx;
				height: 182rpx;
				background-color: #fff;
				padding: 18rpx 32rpx 0 28rpx;
				&-top{
					display: flex;
					&-title{
						margin-left: 10rpx;
						color: #999999;
						font-size: 24rpx;
						
					}
					
				}
				&-lower{
					margin-top: 35rpx;
					display: flex;
					justify-content: space-between;
					&-title{
						font-size: 36rpx;
						color: #3D3D3D;
					}
				}
			}
			

		}
		.butall{
			background-color: #ffffff;
			width: 750rpx;
			height: 150rpx;
			position: absolute;
			bottom:0;
			lift:0;
			z-index: 10;
			.but{
				background-color: #F93648;
				color: #fff;
				margin: 20rpx 150rpx 30rpx 150rpx;
				
			}
		}
	}

</style>
